<template>
	<div class="hotGoods" v-if="hotgoods.length">
		<div class="nav_tit tit clearfix">
			<span class="tit_name fl">人气推荐</span>
			<a href="" class="fr">更多 > </a>
		</div>
		<div class="goods_list">
			<router-link :to="'/Details?id='+val.id" class="clearfix" v-for="val,index in hotgoods">
				<div class="fl g_img">
					<div class="img_square">
						<img alt="图片加载失败" v-lazy="$url+val.g_picture">
					</div>
				</div>
				<div class="g_info g1">
					<div class="g_name">
						{{val.g_name}}
					</div>
					<div class="g_material">{{val.g_material}}</div>
				</div>
				<div class="g_info g2">
					<div class="g_price">
						<span class="price">￥{{val.g_price}}</span>
						<span class="m_price"></span>
					</div>
					<div class="sales">已销售100</div>
					<div class="g_info g_buy">
						购买
					</div>
				</div>
			</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// hotgo:[
				// 	{'srcc':'/imgs/goods1.jpg','tit':'温柔时光','material':'11枝优质红玫瑰搭配绿叶，满天星，随机赠送2只小熊','pri':'189','sales':'100'},
				// 	{'srcc':'/imgs/goods1.jpg','tit':'温柔时光','material':'11枝优质红玫瑰搭配绿叶，满天星，随机赠送2只小熊','pri':'189','sales':'100'},
				// 	{'srcc':'/imgs/goods1.jpg','tit':'温柔时光','material':'11枝优质红玫瑰搭配绿叶，满天星，随机赠送2只小熊','pri':'189','sales':'100'},
				// 	{'srcc':'/imgs/goods1.jpg','tit':'温柔时光','material':'11枝优质红玫瑰搭配绿叶，满天星，随机赠送2只小熊','pri':'189','sales':'100'}, 
				// ]
			}
		},
		props: {
			hotgoods: []
		}
	}
</script>

<style>
	.hotGoods {
		margin-top: 10px;
		background: #fff;
		padding-bottom: 1rem;
	}

	.nav_tit {
		padding: 0.6rem 3% 0.5rem 3%;
	}

	.nav_tit .fr {
		color: #000;
		font-size: 12px;
		font-weight: 400;
	}

	.nav_tit .tit_name {
		font-size: 1.25rem;
		font-weight: bold;
		color: #000;
	}

	.goods_list a {
		display: block;
		padding-bottom: 16px;
		border-bottom: 1px solid #ddd;
		padding: 25px 3%;
		position: relative;
	}

	.g_img {
		width: 44%;
	}

	.img_square {
		display: block;
		width: 100%;
		position: relative;
		padding-top: 100%;
		overflow: hidden;
	}

	.img_square img {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.g_name {
		font-size: 1.25rem;
		line-height: 2.5rem;
		color: #333;
	}

	.g_material {
		font-size: 0.75rem;
		line-height: 1.5rem;
		color: #777;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.goods_list a .g_info {
		width: 52%;
		margin-left: 7%;
		position: absolute;
		left: 40%;
	}

	.goods_list a .g_buy {
		position: absolute;
		right: 0;
		bottom: 0;
		border: 1px solid #000000;
		color: #000;
		border-radius: 4px 4px;
		text-align: center;
		padding: 4px 8px;
		font-size: 1.125rem;
	}

	.goods_list a .g_info.g_buy {
		left: auto;
		bottom: 1rem;
		right: 6%;
		width: 25%;
	}

	.g1 {
		top: 1.5625rem;
	}

	.g2 {
		bottom: 1.5625rem;
	}

	.price {
		font-size: 1.25rem;
		line-height: 2.5rem;
		color: #FF867A;
	}

	.m_price {
		font-size: 0.875rem;
		line-height: 1.75rem;
		color: #777;
		margin-left: 0.3125rem;
		text-decoration: line-through;
	}

	.sales {
		font-size: 1rem;
		color: #6E6E6E;
	}
</style>
